
<template>
  <div>
    <div class="search-content">
      <el-select v-model="searchContent.store_id" placeholder="选择状态">
        <el-option
          v-for="item in options"
          :key="item.store_id"
          :label="item.store_name"
          :value="item.store_id"
        >
        </el-option>
      </el-select>
      <el-input
        class="search-content-input"
        v-model="searchContent.store_nameHandWhite"
        placeholder="请输入店铺名称"
      ></el-input>

      <div class="putaway-time-wrapper">
        <span class="putaway-time-label">创建时间：</span>
        <el-date-picker
          v-model="searchContent.addTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button type="primary" @click="resetSearchData">重置</el-button>
    </div>
    <div class="search-list">
      <el-table :data="groupList" border :height="oHeight">
        <el-table-column
          align="center"
          prop="id"
          label="ID"
          width="72"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="content"
          label="短信内容"
          min-width="400"
        ></el-table-column>

        <el-table-column
          align="center"
          prop="createTime"
          label="创建时间"
          min-width="100"
        >
          <template slot-scope="scope">
            <span>{{
              (scope.row.createTime * 1000) | dateFormatter("YYYY-MM-DD ")
            }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="store_name"
          label="店铺名称"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="clue_auto_send"
          label="线索自动下发"
          min-width="100"
        >
          <template slot-scope="scope">
            {{ change(scope.row.clue_auto_send) }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="mode_id"
          label="模板ID"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="sms_sign"
          label="短信签名"
          min-width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="状态"
          prop="status"
          min-width="80"
        >
          <template slot-scope="scope">
            {{ storeLevel(scope.row.status) }}
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          key="operate"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.status == 1"
              class="operateBtn"
              type="text"
              @click="deleter(scope.row.id, 2, scope.row.type)">
              通过
            </el-button>
            <el-button
              v-show="scope.row.status == 1"
              class="operateBtn"
              type="text"
              @click="deleter(scope.row.id, 3, scope.row.type)">
              未通过
            </el-button>
            <!-- <p></p> -->
            <!-- <el-button class="operateBtn" type="text" @click="edit(scope.row)"
              >|详情</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="bottom">
        <div class="btn-group">
          <el-button
            size="mini"
            type="primary"
            class="btn-bottom"
            @click="expertData"
            >导出</el-button
          >
          <el-button
            v-show="false"
            size="mini"
            type="primary"
            class="btn-bottom"
            @click="showFn"
            >新增</el-button
          >
        </div>
        <!--分页部分-->
        <div class="paginationOne">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchContent.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="searchContent.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <default-opr ref="ceshi"></default-opr>
    <sms-verification :options="smsDialogOptions" @update="smsDialogUpdate"></sms-verification>
  </div>
</template>
<script>
import { resize } from "@/common/js/height.js";
import { dateFormatter } from "../../../../common/js/util";
import defaultOpr from "./default-opr";
import SmsVerification from "@/components/home/sms-verification.vue";
import Qs from "qs";

export default {
  components: { defaultOpr, SmsVerification },
  data() {
    return {
      options: [],
      oHeight: 800,
      searchContent: {
        addTime: "",
        amount: "",
        cjj_add_points: "",
        config_type: "",
        id: "",
        is_open: "",
        points_model: "",
        points_ratio: "",
        start_date: "",
        store_add_points: "",
        store_id: "",
        store_nameHandWhite: "",
        update_time: "",
        currentPage: 1,
        pageSize: 10,
      },
      groupList: [],
      total: 0,
      smsDialogOptions: { visible: false }
    };
  },
  created() {
    this.getList();
    this.getStoreListFun();
  },

  methods: {
    storeLevel(level) {
      switch (level) {
        case "1":
          return "未审核";
          break;
        case "2":
          return "已通过";
          break;
        default:
          return "未通过";
      }
    },
    change(level) {
      switch (level) {
        case "0":
          return "否";
          break;
        case "1":
          return "是";
          break;
        default:
          return "";
      }
    },
    ///新增按钮
    showFn(data) {
      this.$refs.ceshi.show_dialog_fn(data);
    },

    //// 导出操作

    expertData() {
      const data = {};
      // data.page = this.searchContent.currentPage;
      // data.eachNum = this.searchContent.pageSize;
      data.status = this.searchContent.store_id;
      data.store_name = this.searchContent.store_nameHandWhite;

      if (this.searchContent.addTime) {
        data.add_start_time = dateFormatter(
          "YYYY-MM-DD 00:00:00",
          this.searchContent.addTime[0]
        );
        data.add_end_time = dateFormatter(
          "YYYY-MM-DD 23:59:59",
          this.searchContent.addTime[1]
        );
      }

      if (this.$store.state.isServer) {
        var host = location.host.replace("admin", "api");
      } else {
        var host = location.host + "/api";
      }

      var url =
        location.protocol +
        "//" +
        host +
        "/admin/store_sms/index.php?act=templateAudit&op=exportData";
      var searchData = data;

      for (var key in searchData) {
        if (
          !(
            searchData[key] === null ||
            searchData[key] === "" ||
            searchData[key] === undefined ||
            key === "page" ||
            key === "pageSize" ||
            key === "currentPage"
          )
        ) {
          url += "&" + key + "=" + searchData[key];
        }
      }
      window.location.href = url;
    },

    // 选店铺id的列表
    getStoreListFun() {
      this.options = [
        { store_id: "1", store_name: "未审核" },
        { store_id: "2", store_name: "已通过" },
        { store_id: "3", store_name: "未通过" },
      ];
    },
    handleSizeChange(pageSize) {
      this.searchContent.pageSize = pageSize;
      this.searchContent.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(page) {
      this.searchContent.currentPage = page;
      this.getList();
    },
    resetSearchData() {
      this.searchContent.export = "";
      this.searchContent.state = "";
      this.searchContent.store_nameHandWhite = "";
      this.searchContent.store_id = "";
      this.searchContent.addTime = "";
      this.searchContent.currentPage = 1;
      this.getList();
    },

    ////// 店铺详情总列表
    getList() {
      const data = {};
      data.currentPage = this.searchContent.currentPage;
      data.eachNum = this.searchContent.pageSize;
      data.status = this.searchContent.store_id;
      data.store_name = this.searchContent.store_nameHandWhite;
      if (this.searchContent.addTime) {
        data.add_start_time = dateFormatter(
          "YYYY-MM-DD 00:00:00",
          this.searchContent.addTime[0]
        );
        data.add_end_time = dateFormatter(
          "YYYY-MM-DD 23:59:59",
          this.searchContent.addTime[1]
        );
      }
      this.$http
        .post(
          "/admin/store_sms/index.php?act=templateAudit&op=templateList",
          data
        )
        .then((res) => {
          if (res.code == 1) {
            if (res.data) {
              this.groupList = res.data.list;
              this.total = parseInt(res.data.total);
            } else {
              this.groupList = [];
              this.total = 0;
            }
          } else if (res.code == 1000) {
            this.groupList = [];
            this.total = 0;
          } else {
            alert(res.msg);
          }
        });
    },
    search() {
      this.searchContent.currentPage = 1;
      this.getList();
    },
    smsDialogUpdate(res) {
      this.delRequest(res)
    },
    delRequest(params) {
      const { id, status, mode_id } = params
      const datas = { id, status }
      if (mode_id) datas.mode_id = mode_id
      this.$http.post("/admin/store_sms/index.php?act=templateAudit&op=audit", datas)
      .then(
        (res) => {
          if (res.code == 1) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.getList();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        },
        (err) => {
          this.$message({
            showClose: true,
            message: res.msg,
            type: "error",
          });
        }
      );
    },
    // 删除店铺
    deleter(id, status, rowType, verified = false) {
      var str;
      if (status == 2) {
        str = "确认审核通过？";
      } else if (status == 3) {
        str = "确认审核不通过？";
      }
      if (rowType == 3 && status == 2) {
        this.$prompt("请输入模板 ID", str, {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
        }).then(({ value }) => {
          if (!verified) {
            this.smsDialogOptions = { visible: true, params: { id, status, mode_id: value }, type: 4 }
            return
          }
          this.delRequest({id, status, value})
        }).catch(() => {});
      } else {
        this.$confirm(str, '温馨提示', {
          customClass: 'deleter-alert-box'
        }).then((_) => {
          if (!verified && +status === 2) {
            this.smsDialogOptions = { visible: true, params: { id, status }, type: 4 }
            return
          }
          this.delRequest({id, status})
        }).catch((_) => {});
      }
    },
    // 点击编辑
    edit(storeInfo) {
      this.$refs.ceshi.show_dialog_fn(storeInfo);
    },
  },
  mounted() {
    resize(this);
  },
};
</script>
<style>
.deleter-alert-box {
  position: fixed;
  top: 15vh;
  left: 0;
  right: 0;
  margin: 0 auto;
}
</style>
<style lang="scss" scoped>
.search-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &-input {
    width: 200px;
  }
  .putaway-time-wrapper {
    .putaway-time-label {
      font-size: 14px;
    }
    display: flex;
    align-items: center;
    /deep/.el-range-separator {
      box-sizing: content-box;
    }
  }
}
.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>